<template>
  <div>
    <h1>祖孙通讯</h1>
    <Son/>
  </div>
</template>

<script setup>
import {ref, provide} from 'vue'
/**
 * 祖孙通讯 provide函数 inject函数
 *  祖先提供数据 provide
 *  子孙接受数据 inject
 * 1. 祖先provide提供数据 语法 是 函数 函数里两个参数 一个是key 一个是value
 * 2. 子孙inject接受数据 语法 是 函数 函数里一个参数 参数就是key （和祖先提供的key要对应）
 */
import Son from './components/Son.vue'
const money = ref(1000)
// 祖先的方法
const changeMoney = (num) => {
  if(num < 1500) {
    money.value = num
  } else {
    alert('要的零花钱太多了，就算是我后代也不给')
  }
}
// 提供数据
provide('money', money)
// 提供方法
provide('changeMoney', changeMoney)
</script>

<style lang="scss" scoped>

</style>